<template>
  <div id="app">
    <Add @addStudent="sumbit"></Add>
    <div class="card" v-for="(item, index) in userInfo" :key="index">
      <Cart :student="item" @tap="toogle(index)"></Cart>
    </div>
  </div>
</template>

<script>
import '@/assets/css/index.css'
import { reactive } from 'vue'
import Cart from './components/Cart.vue'
import Add from './components/Add.vue'
export default {
  components: {
    Cart,
    Add
  },
  setup() {
    const userInfo = reactive([
      { name: '张三', age: 20, gender: '男', srcImg: require('@/assets/img/1.jpg'), yuwen: 80, math: 80, english: 80, show: false },
      { name: '李四', age: 20, gender: '男', srcImg: require('@/assets/img/2.jpg'), yuwen: 80, math: 50, english: 80, show: false },
      { name: '王五', age: 20, gender: '男', srcImg: require('@/assets/img/3.jpg'), yuwen: 80, math: 100, english: 80, show: false }
    ])
    const toogle = (index) => {
      userInfo[index].show = !userInfo[index].show
      // console.log(this.userInfo.yuwen)
    }
    const sumbit = (inputInfo) => {
      // console.log(inputInfo)
      if ((inputInfo.name === '') | (!inputInfo.gender === '')) {
        alert('请填写完整！')
        return
      }
      // 对象深拷贝
      const obj = JSON.parse(JSON.stringify(inputInfo))
      userInfo.push(obj)
      // console.log(this.userInfo)
      return (inputInfo = { name: '', age: 0, gender: '', srcImg: require('@/assets/img/1.jpg'), yuwen: 0, math: 0, english: 0, show: false })
    }
    return {
      userInfo,
      toogle,
      sumbit
    }
  }
}
</script>

<style></style>
